<template>
  <div class="container" >
    <div class="container-left" >
       <div>
         <img :src="userInfo.avatar_url" alt="qingyang">
       </div>
       <div class="container-left-message" >
         <div class="row-one" >{{helloShow.hello}}，{{userInfo.user_name}}，{{helloShow.helloDesc}}</div>
         <div class="row-two" ><i class="el-icon-heavy-rain" ></i><span class="qy-padl4" >{{weather}}</span></div>
       </div>
    </div>
    <div class="container-right" >
       <div class="container-right-item" >
         <div class="list" ><i class="el-icon-s-grid item-a" ></i><span>项目数</span></div>
         <div class="num" >12</div>
        </div>
       <div class="container-right-item">
         <div class="list"><i class="el-icon-s-claim item-b" ></i><span>待办项</span></div>
         <div class="num" >26</div>
       </div>
       <div class="container-right-item">
         <div class="list"><i class="el-icon-chat-line-round item-c" ></i><span>留言</span></div>
         <div class="num" >8</div>
       </div>
    </div>
  </div>
</template>
<script>
import {
  reactive,
  toRefs,
  inject
} from "vue";
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: "sh-header",
  setup() {
    // 定义路由
    const router = useRouter()
    const route = useRoute()
    // 定义存储
    const store = useStore()
    const Utils = inject('$Utils')
    const Request = inject('$Request')
    const Api = inject('$Api')
    // 定义数据
    const state = reactive({
      helloShow: Utils.getNowHello(),
      userInfo:store.state.user.userInfo,
      weather:''
    });

    const initData = () => {
       console.log("初始化数据")
       Request.requestPost('', Api.apiCommon.weather)
        .then((res) => {
          console.log(res);
          state.weather = res.data
        })
        .catch((err) => {
          console.error(err);
        });
    };
    initData()
    return {
      ...toRefs(state),
      initData
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variable.scss";
.container{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: $sidebar-bg;
  padding: 20px;
  border: 1px solid $sidebar-border;
  width: 100%;
  //min-width: $sh-header-min-width;
  .container-left{
    display: flex;
    flex-direction: row;
    align-items: center;
    img{
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
    }
    .container-left-message{
      text-align: left;
      .row-one{
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 12px;
      }
      .row-two{
        color: #808695;
      }
    }
  }
  .container-right{
    display: flex;
    flex-direction: row;
    align-items: center;
    .container-right-item{
      display: flex;
      flex-direction: column;
      padding: 6px;
      span{
        color: #808695;
        padding: 0 5px;
      }
      .num{
        font-size: 22px;
        margin-top: 5px;
      }
      .list{
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .item-a{
        font-size: 16px;
        color: $blue-weight;
      }
      .item-b{
        font-size: 16px;
        color: $green-weight;
      }
      .item-c{
        font-size: 16px;
        color: $orange-weight;
      }
    }
  }
}
</style>